<template>
	<div class="content flex-box center" :style='_fixStyleHeiht($route)'>
		<!-- 主教练 扫码-->
         
		<div class="Detail" v-if='inof'>
			<!-- <van-button type="text" class="posTop" @click='camerasFlog=!camerasFlog'>
				{{camerasFlog?'after':'before'}}
			</van-button> -->

			<!-- <div class="videoCon flex-box column center">
				<van-icon class="videoBg" name="scan" />
				<p style="text-align: center"> 将二维码放入框内，即可自动扫描</p>
				<div style="text-align: center" class="sweep" @click="open">开始扫码</div>
				<div style="text-align: center" class="sweep" @click="close">识别失败，停止扫码</div>
				<div id="result">
					<div :key='index' v-for="(ites,index) in scans">
						<p>{{ites.content}}-{{ites.date}}</p>
						<image :src='ites.date'></image>
					</div>
				</div>
			</div>
			<video ref="video_id"></video> -->
			<div v-if='!destroyed'>
				<template v-if='env.BASE_URL !== "/hkmobile/"&&error'>
			    <p class="error">{{ error }}</p>
			    <p class="decode-result">Last result: <b>{{ result }}</b></p>
				</template> 
			    <qrcode-stream  @decode="onDecode" @init="onInit" />
				<!-- <button @click="reload">Destroy And Re-Create Component</button> -->
			  </div>
		</div>
		 <vue-qrcode :value="qrCode"  :options="{ size: 180 }"   v-else />
		<!-- <div id="qrcode" ref="qrcode" v-if='!inof'></div> -->
	</div>
</template>
<script>
	//import './qrscan-master/qrscan'
	// const mui=new window.mui('code')
	import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
	import VueQrcode from '@xkeshi/vue-qrcode';
	// import QRCode from 'qrcodejs2'
	//const Instascan = require('instascan')
	export default {
		data() {
			return {
				scans: [],
				scanner: null,
				process,
				camerasFlog: false,
				indsCamera: 1,
				inof:false,
				result: '',
				error: '',
				loading: false,
				destroyed: false,
				qrCode:''
			}
		},
		components: { QrcodeStream,VueQrcode },
		watch: {
			camerasFlog(val) {
				var inds = val ? 1 : 0
				this.indsCamera = inds
				this.activeCameraId = this.cameras[inds].id
				this.scanner.start(this.cameras[inds])
			},
		},
		computed: {

		},
		beforeCreate() {

		},
		created() {
		console.log('route', this.$route)
		let lessonId = this.$route.query.lessonId
		//this.params = inof ? params.split('_-') : this.$route.query.params
		this.inof = lessonId

		},
		mounted() {
			var self = this
			//debugger
			var $router  = this.$router
			if (this.inof) {
			   this.$store.dispatch('user/getLoction')
				//this.cameraCallback('hX4t+xtsuURyFzeQyraJVO/2Nd5MSX3CwSBAMG7Rqak=')
				// this.scanner = new Instascan.Scanner({
				// 	video: this.$refs.video_id,
				// 	scanPeriod: 5
				// });
				// this.open()
				if(this.destroyed){
					this.destroyed = false
				}
				
				//this.cameraCallback('content')
			} else { //生成自己的二维码 被签到
			var that = this
			this.$ajax.get('roll_call/obtain/qrcode',false,(res)=>{
			//state.params.qr = res.result?res.result.qr:''
			if(res.result){
				that.$nextTick(() => {
					that.qrCode = res.result.qr
					that.qrcode(res.result.qr)
				})
			}
			},()=>{
				
			})	
				
			}
			//	this.cameraCallback('content')
		},
		methods: {
			onDecode (result) {
				var that = this
			      this.result = result
				  console.log("颯颯大蘇打",result)
				  this.cameraCallback(result)
				 this.timer = setTimeout(()=>{
				  		 that.reload()
				  },1200)
			    },
			
			    async onInit (promise) {
					this.loading = true
			      try {
			        let result =  await promise
					console.log("reslt",result)
			      } catch (error) {
			        if (error.name === 'NotAllowedError') {
			          this.error = "ERROR: you need to grant camera access permisson"
			        } else if (error.name === 'NotFoundError') {
			          this.error = "ERROR: no camera on this device"
			        } else if (error.name === 'NotSupportedError') {
			          this.error = "ERROR: secure context required (HTTPS, localhost)"
			        } else if (error.name === 'NotReadableError') {
			          this.error = "ERROR: is the camera already in use?"
			        } else if (error.name === 'OverconstrainedError') {
			          this.error = "ERROR: installed cameras are not suitable"
			        } else if (error.name === 'StreamApiNotSupportedError') {
			          this.error = "ERROR: Stream API is not supported in this browser"
			        }
			      } finally {
					this.loading = false
				}
			    },
				async reload () {
				      this.destroyed = true
				      await this.$nextTick()
				      this.destroyed = false
					  
					  clearTimeout(this.timer)
				    },
			cameraCallback(content) {
				var params = this.$store.state.train.params 
				console.log('content',content,params)
				
				params.qrCode = content
				params.coordinate = this.$store.getters.coordinate
				let pars = params
				if(this.env ==='development'){
					alert(JSON.stringify(params))
				}
				console.log('json',pars)
				//content = content?content:'LrALVMLnXPOzCLxTWiok6w=='
				this.$store.dispatch('train/scanCheck', pars)
				//this.close()
			},
			//   //创建 qrcode
			qrcode(qr) {
				//var that = this
				console.log(12321, qr)
				// new QRCode('qrcode', {
				// 	width: 320, // 设置宽度，单位像素
				// 	height: 320, // 设置高度，单位像素
				// 	text: qr // 设置二维码内容或跳转地址
				// })
			}
		}
	}
</script>

<style scoped lang="less">
	@textCor: white;
	@bg: black;

	.posAbs(@t: auto, @r: auto, @b: auto, @l: auto) {
		position: absolute;
		right: @r;
		left: @l;
		top: @t;
		bottom: @b;
	}

	.content {
		position: relative;
		background-color: @bg;
		color: @textCor;
		height: 100%;
		overflow: hidden;

		.Detail {
			width: 100%;
			margin: 0 auto;
            height:100%;
			.videoCon {
				position: absolute;width: 100%;
				height: 100%;
                z-index: 2;
				.videoBg {
					color: @textCor;
					font-size:10rem;
					// .posAbs(50%, 50%);
					// margin-right: -160px;
					// margin-top: -160px;
					// z-index: 2;
				}


			}

			video {
				display: block;
				margin: 0 auto;
				width: 100%;
				height: 100%;
				background: #000;
				//border-radius: 5px;
			}

			.posTop {
				width: 50px;
				padding: 0;
				text-align: center;
				.posAbs(15px, 15px);
				z-index: 100;
			}

			.session {
				.name {
					margin: 0.4rem 0;
					font-size: 0.4rem;
					color: #333333;
					font-weight: bold;
				}

				.useTutorials {
					background-color: #3998F7;
					border-radius: 5px;
				}

				.desc {
					margin: 0.4rem 0;
					font-size: 0.4rem;
					color: #333333;

					.title {
						font-weight: bold;
					}

					.intro {
						margin-top: 0.1rem;
					}
				}
			}

			// p {
			// 	font-size: 0.72rem;
			// }

			.sweep {
				text-align: center;
				margin: 15px auto 0 auto;
				width: 80%;
				//height: 1rem;
				
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 1.024rem;
				// font-size: 0.768rem;
				position: relative;
				z-index: 9999;
				color: white;
				//background: #FF8C99;
				//box-shadow: 0px 6px 9px 0px rgba(255, 140, 153, 0.57);

			}
		}

		.start {
			text-align: center;
			margin: 0 auto;
			width: 13.8667rem;
			height: 1.7067rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 1.024rem;
			font-size: 0.768rem;
			background: white;
			border: 2px solid rgba(255, 169, 163, 1);
			color: rgba(255, 169, 163, 1);
			margin-top: 0.64rem;
		}
	}
</style>
